﻿//const myChart1 = echarts.init(document.getElementById('camera'));
const myChart2 = echarts.init(document.getElementById('car'));
const myChart3 = echarts.init(document.getElementById('temperature'));//温度湿度
const myChart4 = echarts.init(document.getElementById('delivery'));//配送量 配送轨迹
const myChart5 = echarts.init(document.getElementById('sameDayOrder'));//当日订单总量
const myChart6 = echarts.init(document.getElementById('completeOrder'));//完成订单量,未完成订单量
//const myChart7 = echarts.init(document.getElementById('incompleteOrders'));//企业介绍

//曲线图
option = {
    legend: {
        data: [],
        textStyle:{
            fontSize: 18,//字体大小
            color: '#000'//字体颜色
        },
    },
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            fontSize:'18',
            color:'#17ff06'
        },
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            fontSize:'15',
            color:'#17ff06'
        },
    },
    series: [
        {
            name: '',
            type: 'line',
            stack: '总量',
            data: []
        },
        {
            name: '',
            type: 'line',
            stack: '总量',
            data: []
        },
    ]
};

//动态加载 曲线图的数据
$.ajax({
    type : "post",
    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url : "/testData",    //请求发送到TestServlet处
    data : {},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result) {

            //挨个取出销量并填入销量数组
            myChart3.setOption({
                legend: {
                    data: [result[0].dataName, result[1].dataName]
                },
                series:
                    [
                    {
                    // 根据名字对应到相应的系列
                    name: result[0].dataName,
                    data: result[0].dataNum,
                    },
                    {
                        // 根据名字对应到相应的系列
                        name: result[1].dataName,
                        data: result[1].dataNum
                    },
                ]
            });
        }
        //隐藏加载动画
        myChart3.hideLoading();
    },
    error : function(errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
});


//（竖向）柱状图
option1 = {
    legend: {
        data: ['配送量'],
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            fontSize:'15',
            color:'#17ff06',
            show:true,
        },
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            fontSize:'15',
            color:'#17ff06',
            show:true,
        },
    },
    series: [
        {
            name:"配送量",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
        },
    ]
};

//仪表盘
option2 = {
    tooltip : {
        formatter: "仪表盘"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },

    series: [
        {
            name: '业务指标',
            type: 'gauge',
            detail: {formatter:'{value}%'},
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                }
            },
            data: [{value: 92, name: '完成率'}]
        }
    ]
};

//饼状图
option3 = {
    backgroundColor: '',
    title: {
        text: '配送轨迹',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#000',
            fontSize:20,
        }
    },
    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 335, name: '1号配送区域'},
                {value: 310, name: '2号配送区域'},
                {value: 274, name: '3号配送区域'},
                {value: 235, name: '4号配送区域'},
                {value: 400, name: '5号配送区域'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                color: '#000',
                fontSize:18,
            },
            labelLine: {
                lineStyle: {
                    color: '#000',
                    fontSize:18,
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

//雷达图
option4 = {
   /* title: {
        text: '雷达图'
    },*/
    visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
    },
    tooltip: {

    },
    legend: {
        data: ['预算分配', '实际开销','额外分配','额外开销']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#000',
                fontSize:18,
              /*  backgroundColor: '#999',*/
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '销售'},
            { name: '管理'},
            { name: '信息技术'},
            { name: '客服'},
            { name: '研发'},
            { name: '市场'}
        ]
    },
    series: [{
        /*name: '预算 vs 开销（Budget vs spending）',*/
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配',
            },
            {
                value: [5000, 14000, 8547, 31000, 42000, 36514],
                name: '实际开销'
            },
            {
                value: [5000, 2364, 28000, 31000, 4000, 25471],
                name: '额外分配'
            },
            {
                value: [5000, 5222, 28000, 5871, 3654, 8947],
                name: '额外开销'
            }
        ]
    }]
};

//金字塔图
option5 = {
   /* title: {
        text: '漏斗图',
    },*/
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单'],
        textStyle: {fontSize: 18, color: '#333'}
    },

    series: [
        {
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 15
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

//圆环饼状图
option6 = {
    title: {
        text: '当日订单总量',
        left: 'center',
        textStyle: {
            color: '#000'          // 图例文字颜色
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [
            {
                name:'维生素c',
                icon : 'circle',
                textStyle: {
                    color: '#17ff06'          // 图例文字颜色
                }
            },
            {
                name:'止咳糖浆',
                icon : 'rect',
                textStyle: {
                    color: '#17ff06'          // 图例文字颜色
                }
            },
            {
                name:'钙片',
                icon : 'roundRect',
                textStyle: {
                    color: '#17ff06'          // 图例文字颜色
                }
            },
            {
                name:'阿莫西林',
                icon : 'triangle',
                textStyle: {
                    color: '#17ff06'          // 图例文字颜色
                }
            },
        ]
    },
    series: [
        {
            name: '其他',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            data: [
                {
                    value: 335,
                    name: '维生素c'
                },
                {
                    value: 310,
                    name: '止咳糖浆',
                 },
                {
                    value: 234,
                    name: '钙片'
                },
                {
                    value: 135,
                    name: '阿莫西林'
                },
            ],
            itemStyle:{
                normal:{
                    label:{
                        textStyle:{
                            fontSize:15,
                            color:'#17ff06'
                        }
                    },
                }
            },
        }
    ]
};


//（横向）柱状图
option7 = {
    title: {
       /* text: '当日完成订单，未完成订单',
        x:'center',
        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 18,
            color:"#000"
        },*/
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['完成订单量', '未完成订单量'],
        textStyle:{
            fontSize: 18,//字体大小
            color: '#000'//字体颜色
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            fontSize:'15',
            color:'#17ff06'
        },
    },
    yAxis: {
        type: 'category',
        data: ['阿莫西林', '维生素c', '钙片', '止咳糖浆'],
        axisLabel: {
            fontSize:'15',
            color:'#17ff06'
        },
    },
    series: [
        {
            name:"完成订单量",
            type: 'bar',
            data: [822, 147, 365, 365]
        },
        {
            name:"未完成订单量",
            type: 'bar',
            data: [784, 247, 357, 287]
        }
    ]
};
/*
myChart1.showLoading();
myChart2.showLoading();
myChart3.showLoading();
myChart4.showLoading();
myChart5.showLoading();
myChart6.showLoading();
*/

//myChart1.setOption(option);
myChart2.setOption(option2);
myChart3.setOption(option);
myChart4.setOption(option1);
myChart5.setOption(option6);
myChart6.setOption(option7);
/*
myChart7.setOption();
myChart8.setOption();*/
